<template>
  <div class="app-wrapper">
    <div class="home">
      <header>
        <div class="header-content">
          <h1>TooBit 生产巡检系统</h1>
          <p>欢迎使用 TooBit - 虚拟货币交易所的专业巡检系统</p>
        </div>
      </header>
      <main>
        <section class="intro">
          <h2>系统简介</h2>
          <p>
            TooBit 是全球领先的虚拟货币交易所，致力于提供安全、稳定的交易环境。我们的生产巡检系统专为实时监控和优化系统性能而设计，确保交易平台的高效运行和可靠性。
          </p>
        </section>
        <section class="features">
          <h2>主要功能</h2>
          <div class="feature-list">
            <div class="feature-item">
              <h3>实时监控</h3>
              <p>全面监控关键系统指标，实时识别和应对潜在问题，确保系统稳定运行。</p>
            </div>
            <div class="feature-item">
              <h3>系统健康检查</h3>
              <p>定期进行系统健康检查，确保系统状态良好，预防潜在故障的发生。</p>
            </div>
            <div class="feature-item">
              <h3>告警与通知</h3>
              <p>自动发送告警通知，确保系统异常能够迅速被检测和响应。</p>
            </div>
            <div class="feature-item">
              <h3>数据报表</h3>
              <p>生成详细的系统运行报表，为数据分析和系统优化提供支持，提升运营效率。</p>
            </div>
          </div>
        </section>
        <section class="latest-updates">
          <h2>最新更新</h2>
          <div class="update-log">
            <ol>
              <li>版本 1.0.0 发布 - 增强了系统健康检查模块的功能。</li>
              <li>修复了数据报表中的部分格式问题，优化了数据展示。</li>
              <li>提升了告警通知系统的稳定性和准确性，确保更及时的响应。</li>
            </ol>
          </div>
        </section>
      </main>
      <footer>
        <p>
          <b>TooBit</b> - 全球领先的虚拟货币交易所，致力于提供卓越的交易服务和系统支持。
        </p>
        <button @click="goTarget('https://www.toobit.com')">了解更多</button>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "1.0.0"
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">
.app-wrapper {
  width: 100%;
  overflow-x: hidden;
}

.home {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 100px);
  margin: 0;
  font-family: 'Roboto', sans-serif;

  header {
    background: linear-gradient(135deg, #0d47a1, #42a5f5);
    color: #fff;
    padding: 40px 20px;
    text-align: center;

    .header-content {
      max-width: 800px;
      margin: 0 auto;
    }

    h1 {
      font-size: 3rem;
      margin: 0;
    }

    p {
      font-size: 1.2rem;
      margin-top: 10px;
    }
  }

  main {
    flex: 1;
    padding: 20px;
    background-color: #f0f4f8;

    section {
      margin-bottom: 20px;
    }

    .intro,
    .features,
    .latest-updates {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }

    .intro {
      border-left: 5px solid #0d47a1;
    }

    .features {
      .feature-list {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;

        .feature-item {
          flex: 1 1 calc(50% - 20px);
          background-color: #e2e8f0;
          border-radius: 8px;
          padding: 20px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

          h3 {
            color: #1f2937;
          }

          p {
            color: #4b5563;
          }
        }
      }
    }

    .latest-updates {
      .update-log {
        ol {
          margin: 0;
          padding-left: 20px;
        }
      }
    }
  }

  footer {
    background-color: #0d47a1;
    color: #fff;
    padding: 20px;
    text-align: center;

    p {
      margin: 0;
      font-size: 1rem;
    }

    button {
      margin-top: 10px;
      padding: 10px 20px;
      font-size: 1rem;
      color: #fff;
      background-color: #42a5f5;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: #1e88e5;
      }
    }
  }
}
</style>
